<template>
    <el-main>
        <!-- 查询条件区域 -->
        <el-form :inline="true" ref="searchForm" class="demo-form-inline" label-width="80px" size="small">
            <el-form-item>
                <el-input v-model="searchModel.departmentName" placeholder="请输入部门名称" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                <el-button icon="el-icon-refresh-right">重置</el-button>
                <el-button type="success" icon="el-icon-plus" @click="openAddWindow()">新增</el-button>
            </el-form-item>
        </el-form>
        <!-- 数据表格 -->
        <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all stripe
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <!-- prop:填写数据的属性名称 -->
            <el-table-column prop="departmentName" label="部门名称" />
            <el-table-column prop="parentName" label="所属部门" />
            <el-table-column prop="phone" label="部门电话" />
            <el-table-column prop="address" label="部门地址" />
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row)" icon="el-icon-s-promotion">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
                        icon="el-icon-delete-solid">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加和修改窗口 -->
        <system-dialog :title="deptDialog.title" :visible="deptDialog.visible" :width="deptDialog.width"
            :height="deptDialog.height" @onClose="onClose" @onConfirm="onConfirm">
            <div slot="content">
                <el-form :model="dept" ref="deptForm" :rules="rules" label-width="80px" :inline="true" size="small">
                    <el-form-item label="所属部门" prop="parentName">
                        <el-input v-model="dept.parentName" @click.native="openSelectDeptWindow()"
                            :readonly="true"></el-input>
                    </el-form-item>
                    <el-form-item label="部门名称" prop="departmentName">
                        <el-input v-model="dept.departmentName"></el-input>
                    </el-form-item>
                    <el-form-item label="部门电话">
                        <el-input v-model="dept.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="部门地址">
                        <el-input v-model="dept.address"></el-input>
                    </el-form-item>
                    <el-form-item label="序号">
                        <el-input v-model="dept.orderNum"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </system-dialog>

        <!-- 选择所属部门的窗口 -->
        <system-dialog :title="parentDialog.title" :visible="parentDialog.visible" :width="parentDialog.width"
            :height="parentDialog.height" @onClose="onParentClose" @onConfirm="onParentConfirm">
            <div slot="content">
                <el-tree ref="parentTree" :data="treeList" node-key="id" :props="defaultProps" empty-text="暂无数据"
                    :highlight-current="true" :expand-on-click-node="false" :default-expand-all="true"
                    @node-click="handleNodeClick">
                    <div class="customer-tree-node" slot-scope="{ node, data }">
                        <!-- 判断当前节点的子节点长度是否为0 -->
                        <span v-if="data.children.length === 0">
                            <i class="el-icon-document"></i>
                        </span>
                        <span v-else @click="changeIcon(data)">
                            <!-- 判断节点是否是展开的 -->
                            <svg-icon v-if="data.open" icon-class="add"></svg-icon>
                            <svg-icon v-else icon-class="sub"></svg-icon>
                        </span>
                        <span style="margin-left: 3px">{{ node.label }}</span>
                    </div>
                </el-tree>
            </div>
        </system-dialog>
    </el-main>
</template>

<script>
//导入department脚本文件
import departmentApi from "@/api/department";
//导入对话框组件
import SystemDialog from "@/components/system/SystemDialog1.vue";

export default {
    name: "department",
    components: {
        SystemDialog,
    },
    data() {
        return {
            searchModel: {
                departmentName: "", //部门名称
            },
            tableData: [],
            deptDialog: {
                title: "",
                visible: false,
                width: 560,
                height: 170,
            },
            dept: {
                //对应到department里面的属性
                id: "",
                departmentName: "",
                pid: "",
                parentName: "",
                phone: "",
                address: "",
                orderNum: "",
            },
            rules: {
                parentName: [
                    { required: true, message: "请选择所属部门", trigger: "change" },
                ],
                departmentName: [
                    { required: true, message: "请输入部门名称", trigger: "change" },
                ],
            },
            //选择所属部门的属性
            parentDialog: {
                title: "选择所属部门",
                visible: false,
                width: 300,
                height: 400,
            },
            treeList: [], //树形菜单列表
            //树形组件默认属性值
            defaultProps: {
                children: "children",
                label: "departmentName",
            },
        };
    },
    //初始化时调用
    created() {
        //调用查询部门列表
        this.search();
    },

    methods: {

        /**
         * 导出文档
         */
        handleDownload() {
            this.downloadLoading = true
            import('@/vendor/Export2Excel').then(excel => {
                const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
                const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
                const list = this.list
                const data = this.formatJson(filterVal, list)
                excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filename: this.filename,
                    autoWidth: this.autoWidth,
                    bookType: this.bookType
                })
                this.downloadLoading = false
            })
        },

        /**
         * 编辑部门
         */
        handleEdit(row) {
            //数据回显
            this.$objCopy(row, this.dept);
            //设置窗口的标题
            this.deptDialog.title = "编辑部门";
            //显示窗口
            this.deptDialog.visible = true;
        },
        /**
         * 删除部门
         */
        async handleDelete(row) {
            // 查询部门下是否存在子部门或用户
            let result = await departmentApi.checkDepartment({ id: row.id });
            //判断是否可以删除
            if (result.success) {
                //提示不能删除
                this.$message.warning(result.message);
            } else {
                //确认是否删除
                let confirm = this.$myconfirm("确认要删除该数据吗？");
                if (confirm) {
                    //发送删除请求
                    let res = await departmentApi.deleteById({ id: row.id });
                    //判断是否成功
                    if (res.success) {
                        //成功提示
                        this.$message.success(res.message);
                        //刷新
                        this.search();
                    } else {
                        //失败提示
                        this.$message.error(res.message);
                    }

                }
            }
        },

        /**
         * 查询部门列表
         */
        async search() {
            //发送查询请求
            // let res = await departmentApi.getDepartmentList(this.departmentName)
            // .then获取请求成功，.catch获取请求失败，并抛出异常，停止往下执行
            await departmentApi
                .getDepartmentList(this.searchModel)
                .then((res) => {
                    //查看请求成功的数据
                    console.log(res);
                    if (res.success) {
                        this.tableData = res.data;
                    }
                })
                .catch((err) => {
                    // ElMessage.error("请求失败")
                    throw new Error("请求失败");
                });
            // console.log(res)
            // //判断是否成功
            // if (res.success) {
            //     this.tableData = res.data
            // }
        },

        /**
         * 打开添加窗口
         */
        openAddWindow() {
            //清空表单数据,第一个参数是表单的ref值，后面一个参数是表单数据
            this.$resetForm("deptForm", this.dept)

            this.deptDialog.title = "新增部门";
            this.deptDialog.visible = true;
        },

        /**
         * 窗口的关闭事件
         */
        onClose() {
            this.deptDialog.visible = false;
        },
        /**
         * 窗口确认事件
         */
        onConfirm() {
            //进行表单验证
            this.$refs.deptForm.validate(async (valid) => {
                //如果验证通过
                if (valid) {
                    let res = null;

                    //判断当前是新增还是修改（判断条件，判断当前dept对象的id属性是否为空）
                    //为空发送新增请求，不为空发送修改请求
                    if (this.dept.id === "") {
                        //发送添加请求
                        res = await departmentApi.addDept(this.dept);
                    } else {
                        //发送修改请求
                        res = await departmentApi.updateDept(this.dept);
                    }

                    if (res.success) {
                        //提示成功
                        this.$message.success(res.message);
                        //刷新数据
                        this.search();
                        //关闭窗口
                        this.deptDialog.visible = false;
                    } else {
                        this.$message.error(res.message);
                    }
                }
            })

        },
        /**
         * 关闭选择所属部门事件
         */
        onParentClose() {
            this.parentDialog.visible = false;
        },
        /**
         * 选择所属部门确认事件
         */
        onParentConfirm() {
            this.parentDialog.visible = false;
        },

        /**
         * 点击所属部门框后弹出所属部门窗口事件
         */
        async openSelectDeptWindow() {
            this.parentDialog.visible = true;
            //查询所属部门列表
            let res = await departmentApi.getParentTreeList();
            console.log(res);
            //判断是否成功
            if (res.success) {
                this.treeList = res.data;
            }
        },
        /**
         * 点击树节点加减号时触发
         * @param {} data 
         */
        changeIcon(data) {
            //修改折叠的状态
            data.open = !data.open;
            this.$refs.parentTree.store.nodesMap[data.id].expanded = !data.open;
        },

        /**
         * 树节点点击事件
         */
        handleNodeClick(data) {
            //将选中的部门赋值给我们的dept对象
            this.dept.pid = data.id;
            this.dept.parentName = data.departmentName;
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tree {
    .el-tree-node {
        position: relative;
        padding-left: 10px;
    }

    .el-tree-node__children {
        padding-left: 20px;
    }

    .el-tree-node :last-child:before {
        height: 40px;
    }

    .el-tree>.el-tree-node:before {
        border-left: none;
    }

    .el-tree>.el-tree-node:after {
        border-top: none;
    }

    .el-tree-node:before,
    .el-tree-node:after {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .tree :first-child .el-tree-node:before {
        border-left: none;
    }

    .el-tree-node:before {
        border-left: 1px dotted #d9d9d9;
        bottom: 0px;
        height: 100%;
        top: -25px;
        width: 1px;
    }

    .el-tree-node:after {
        border-top: 1px dotted #d9d9d9;
        height: 20px;
        top: 14px;
        width: 24px;
    }

    .el-tree-node__expand-icon.is-leaf {
        width: 8px;
    }

    .el-tree-node__content>.el-tree-node__expand-icon {
        display: none;
    }

    .el-tree-node__content {
        line-height: 30px;
        height: 30px;
        padding-left: 10px !important;
    }
}

::v-deep .el-tree>div {
    &::before {
        display: none;
    }

    &::after {
        display: none;
    }
}
</style>
